<!--操作-->
<nz-row>
  <!--  <button nz-button nzType="primary" (click)="showCheckModal(true)"-->
  <!--          *ngIf="permission.userPermission.has('customization:manage:order-manage:check')">批量审核-->
  <!--  </button>-->
  <button nz-button nzType="primary" style="margin-right: 16px" (click)="addQuoteModalShow()"
          *ngIf="permission.userPermission.has('aisi-price:quoteManage:add')">新增报价单
  </button>
</nz-row>
<!--表格-->
<nz-table
  style="min-width: 1488px;overflow-x: auto"
  #rowSelectionTable
  [nzData]="listOfData.records"
  nzShowPagination="false"
  [nzPageSize]="999"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">ID</th>
    <th nzAlign="center">长标题</th>
    <th nzAlign="center">短标题</th>
    <th nzAlign="center">品牌</th>
    <th nzAlign="center">报价</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center">排序</th>
    <th nzAlign="center">图标</th>
    <th nzAlign="center">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index">
    <td nzAlign="center">{{data['id']}}</td>
    <td nzAlign="center">{{data['title']}}</td>
    <td nzAlign="center">{{data['minTitle']}}</td>
    <td nzAlign="center">{{getBrandName(data['bannerId'])}}</td>
    <td nzAlign="center">{{data['priceType'] === 0 ? '回收价' : '销售价'}}</td>
    <td nzAlign="center"
        [ngStyle]="{color: data['status']===1?'#67C23A':'#F56C6C'}">{{data['status'] === 1 ? '启用' : '禁用'}}</td>
    <td nzAlign="center">{{data['sort']}}</td>
    <td nzAlign="center">
      <img *ngIf="data['url']"
           nz-image
           style="width: 60px;height: 60px"
           [nzSrc]="data['url']"
           alt=""
      />
    </td>
    <td nzAlign="center">
      <a style="color: #409EFF" *ngIf="permission.userPermission.has('aisi-price:quoteManage:refresh')"
         (click)="refreshQuote(data['id'])">更新</a>
      <a style="color: #409EFF" *ngIf="permission.userPermission.has('aisi-price:quoteManage:edit')"
         (click)="addQuoteModalShow(data)">编辑</a>
      <a style="color: #F56C6C" *ngIf="permission.userPermission.has('aisi-price:quoteManage:delete')"
         nzPopconfirmPlacement="top"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除该数据吗?"
         nzOkText="确认" (nzOnConfirm)="deleteQuote(data['id'])"
         nzCancelText="取消">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>

<!--新增报价单-->
<nz-modal
  [(nzVisible)]="addQuoteModal.visible"
  [nzTitle]="addQuoteModal.id?'编辑报价单':'新增报价单'"
  (nzOnCancel)="addQuoteModalHide()"
  (nzOnOk)="addQuoteModalSave()"
  [nzOkLoading]="addQuoteModal.loading"
>
  <ng-container *nzModalContent>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="5" class="labelCol">
        <label for="addQuoteModalName1"><span>*</span>长标题:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <input id="addQuoteModalName1" nz-input placeholder="请输入长标题" [(ngModel)]="addQuoteModal.nameExport"/>
        <div style="margin-top: 8px;color: #999999">说明：导出报价单中的报价单名称</div>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="5" class="labelCol">
        <label for="addQuoteModalName2"><span>*</span>短标题:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <input id="addQuoteModalName2" nz-input placeholder="请输入短标题" [(ngModel)]="addQuoteModal.nameShow"/>
        <div style="margin-top: 8px;color: #999999">说明：用于前端报价单列表</div>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="5" class="labelCol">
        <label for="addQuoteModalBrand"><span>*</span>品牌:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <nz-select id="addQuoteModalBrand" [(ngModel)]="addQuoteModal.brandId" nzPlaceHolder="请选择所属品牌"
                   style="width: 100%"
                   nzAllowClear>
          <nz-option *ngFor="let item of brandOptions" [nzLabel]="item['name']" [nzValue]="item['id']"></nz-option>
        </nz-select>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="5" class="labelCol">
        <label for="addQuoteModalType"><span>*</span>报价类型:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <nz-select id="addQuoteModalType" [(ngModel)]="addQuoteModal.type" nzPlaceHolder="请选择类型" style="width: 100%"
                   nzAllowClear>
          <nz-option nzLabel="回收价" [nzValue]="0"></nz-option>
          <nz-option nzLabel="销售价" [nzValue]="1"></nz-option>
        </nz-select>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="5" class="labelCol">
        <label for="addQuoteModalSort"><span>*</span>排序:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <input id="addQuoteModalSort" nz-input placeholder="请输入排序" [(ngModel)]="addQuoteModal.sort"/>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="5" class="labelCol">
        <label>图标:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <nz-upload id="image"
                   style="max-width: 120px"
                   class="avatar-uploader"
                   [(nzFileList)]="imageList"
                   nzListType="picture-card"
                   [nzShowUploadList]="false"
                   [nzBeforeUpload]="beforeUpload"
                   nzAccept="image/*"
        >
          <ng-container *ngIf="!previewImg">
            <i class="upload-icon" nz-icon [nzType]="'plus'"></i>
          </ng-container>
          <img *ngIf="previewImg" [src]="previewImg" style="width: 100%;max-height: 102px"/>
        </nz-upload>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="5" class="labelCol">
        <label for="addQuoteModalStatus"><span>*</span>状态:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1" class="labelCol" style="text-align: left">
        <nz-radio-group id="addQuoteModalStatus" [(ngModel)]="addQuoteModal.status">
          <label nz-radio [nzValue]="1">启用</label>
          <label nz-radio [nzValue]="0">禁用</label>
        </nz-radio-group>
      </nz-col>
    </nz-row>
  </ng-container>
</nz-modal>
